# 折线图  Broken line
def get_broken_line_o1(data_x, data_y):
    min_x = 9999999
    max_x = -9999999
    min_y = 9999999
    max_y = -9999999
    for i in range(len(data_x)):
        for j in range(len(data_x[i])):
            min_x = min(data_x[i][j], min_x)
            max_x = max(data_x[i][j], max_x)
            min_y = min(data_y[i][j], min_y)
            max_y = max(data_y[i][j], max_y)
    width = 1200
    height = 500
    step_x = round(width * 0.9 / (max_x - min_x), 4)
    step_y = round(height * 0.9 / (max_y - min_y), 4)
    html = '	<canvas id="a_canvas" width="1200" height="500"></canvas>\n'
    html += '	<script>\n'
    html += '	               (function (){\n'
    html += '			window.addEventListener("load", function(){\n'
    html += '				var min_y = ' + str(int(min_y)) + '\n'
    html += '				var max_y = ' + str(int(max_y * 1.1)) + '\n'
    html += '				var data_x = ' + str(data_x) + ';\n'
    html += '				var data_y = ' + str(data_y) + ';\n'
    html += '				var strokeStyle_list = ["#2F4F4F","#000000","#00FF00","#FF0000","#FFFF00"];\n'
    html += '				var a_canvas = document.getElementById(\'a_canvas\');\n'
    html += '				var context = a_canvas.getContext("2d");\n'
    html += '				var gradient = context.createLinearGradient(0,0,0,300);\n'
    html += '				context.fillStyle = gradient;\n'
    html += '				context.fillRect(0,0,a_canvas.width,a_canvas.height);\n'
    html += '				var grid_cols = 40;\n'
    html += '				var grid_rows = 10;\n'
    html += '				var cell_height = a_canvas.height / grid_rows;\n'
    html += '				var cell_width = a_canvas.width / grid_cols;\n'
    html += '				var step_height = ' + str(step_y) + '\n'
    html += '				var step_width = ' + str(step_x) + '\n'
    html += '				context.lineWidth = 0.5;\n'
    html += '				context.strokeStyle = "#e0e0e0";\n'
    html += '				context.beginPath();\n'
    html += '				for (var col = 0; col <= grid_cols; col++) {\n'
    html += '					var x = col * cell_width;\n'
    html += '					context.moveTo(x,0);\n'
    html += '					context.lineTo(x,a_canvas.height);\n'
    html += '				}\n'
    html += '				for(var row = 0; row <= grid_rows; row++){\n'
    html += '					var y = row * cell_height;\n'
    html += '					context.moveTo(0,y);\n'
    html += '					context.lineTo(a_canvas.width, y);\n'
    html += '				}\n'
    html += '				context.moveTo(0,a_canvas.height/2);\n'
    html += '				context.lineTo(a_canvas.width,a_canvas.height/2);\n'
    html += '				context.moveTo(0,0);\n'
    html += '				context.lineTo(0,a_canvas.height);\n'
    html += '				context.lineWidth = 1;\n'
    html += '				context.strokeStyle = "#f0f0f0";\n'
    html += '				context.stroke();\n'
    html += '				for (var j=0; j < data_x.length; j++){\n'
    html += '					dx = data_x[j]\n'
    html += '					dy = data_y[j]\n'
    html += '					var points = [];\n'
    html += '					for( var i=0; i < dx.length; i++){\n'
    html += '						var px = step_width * (dx[i] + 2) ;\n'
    html += '						var py = step_height*(max_y - dy[i]) \n'
    html += '						points.push({"x":px,"y":py});\n'
    html += '					}\n'
    html += '					context.beginPath();\n'
    html += '					context.moveTo(points[0].x, points[0].y);\n'
    html += '					for(var i= 1; i< points.length; i++){\n'
    html += '						context.lineTo(points[i].x,points[i].y);\n'
    html += '					}\n'
    html += '					context.lineWidth = 2;\n'
    html += '					context.strokeStyle = strokeStyle_list[j%3];\n'
    html += '					context.stroke();\n'
    html += '					for(var i in points){\n'
    html += '						var p = points[i];\n'
    html += '					    if (i%5 == 0){\n'
    html += '						    context.beginPath();\n'
    html += '						    context.arc(p.x,p.y,1,0,2*Math.PI);\n'
    html += '						    context.strokeStyle = "#000";\n'
    html += '						    context.stroke();\n'
    html += '						    context.fillStyle="white";\n'
    html += '						    context.fill();\n'
    html += '					    }\n'
    html += '					}\n'
    html += '					for(var i in points)\n'
    html += '					{   var p = points[i];\n'
    html += '					    if (i%5 == 0){\n'
    html += '						    context.beginPath();\n'
    html += '						    context.fillStyle="black";\n'
    html += '						    context.fillText(dy[i], p.x - 10, p.y + 10);\n'
    html += '					    }\n'
    html += '					}\n'
    html += '				}\n'
    html += '			},false);\n'
    html += '		})();\n'
    html += '	</script>\n'
    return html


# 折线图  Broken line
def get_broken_line(name: str, data_x, data_y, data_v):
    min_x = 9999999
    max_x = -9999999
    min_y = 9999999
    max_y = -9999999
    for i in range(len(data_x)):
        for j in range(len(data_x[i])):
            min_x = min(data_x[i][j], min_x)
            max_x = max(data_x[i][j], max_x)
            min_y = min(data_y[i][j], min_y)
            max_y = max(data_y[i][j], max_y)
    width = 1200
    height = 500
    step_x = round(width * 0.9 / (max_x - min_x), 4)
    step_y = round(height * 0.9 / (max_y - min_y), 4)
    html = '	<canvas id="' + name + '" width="1200" height="500"></canvas>\n'
    html += '	<script>\n'
    html += '	               (function (){\n'
    html += '			window.addEventListener("load", function(){\n'
    html += '				var min_y = ' + str(int(min_y)) + '\n'
    html += '				var max_y = ' + str(int(max_y * 1.1)) + '\n'
    html += '				var data_x = ' + str(data_x) + ';\n'
    html += '				var data_y = ' + str(data_y) + ';\n'
    html += '				var data_v = ' + str(data_v) + ';\n'
    html += '				var strokeStyle_list = ["#2F4F4F","#000000","#0000FF","#FF0000","#FFFF00"];\n'
    html += '				var a_canvas = document.getElementById(\'' + name + '\');\n'
    html += '				var context = a_canvas.getContext("2d");\n'
    html += '				var gradient = context.createLinearGradient(0,0,0,300);\n'
    html += '				context.fillStyle = gradient;\n'
    html += '				context.fillRect(0,0,a_canvas.width,a_canvas.height);\n'
    html += '				var grid_cols = 40;\n'
    html += '				var grid_rows = 10;\n'
    html += '				var cell_height = a_canvas.height / grid_rows;\n'
    html += '				var cell_width = a_canvas.width / grid_cols;\n'
    html += '				var step_height = ' + str(step_y) + '\n'
    html += '				var step_width = ' + str(step_x) + '\n'
    html += '				context.lineWidth = 0.5;\n'
    html += '				context.strokeStyle = "#e0e0e0";\n'
    html += '				context.beginPath();\n'
    html += '				for (var col = 0; col <= grid_cols; col++) {\n'
    html += '					var x = col * cell_width;\n'
    html += '					context.moveTo(x,0);\n'
    html += '					context.lineTo(x,a_canvas.height);\n'
    html += '				}\n'
    html += '				for(var row = 0; row <= grid_rows; row++){\n'
    html += '					var y = row * cell_height;\n'
    html += '					context.moveTo(0,y);\n'
    html += '					context.lineTo(a_canvas.width, y);\n'
    html += '				}\n'
    html += '				context.moveTo(0,a_canvas.height/2);\n'
    html += '				context.lineTo(a_canvas.width,a_canvas.height/2);\n'
    html += '				context.moveTo(0,0);\n'
    html += '				context.lineTo(0,a_canvas.height);\n'
    html += '				context.lineWidth = 1;\n'
    html += '				context.strokeStyle = "#f0f0f0";\n'
    html += '				context.stroke();\n'
    html += '				for (var j=0; j < data_x.length; j++){\n'
    html += '					dx = data_x[j]\n'
    html += '					dy = data_y[j]\n'
    html += '					dv = data_v[j]\n'
    html += '					var points = [];\n'
    html += '					for( var i=0; i < dx.length; i++){\n'
    html += '						var px = step_width * (dx[i] + 2) ;\n'
    html += '						var py = step_height*(max_y - dy[i]) \n'
    html += '						points.push({"x":px,"y":py});\n'
    html += '					}\n'
    html += '					context.beginPath();\n'
    html += '					context.moveTo(points[0].x, points[0].y);\n'
    html += '					for(var i= 1; i< points.length; i++){\n'
    html += '						context.lineTo(points[i].x,points[i].y);\n'
    html += '					}\n'
    html += '					context.lineWidth = 2;\n'
    html += '					context.strokeStyle = strokeStyle_list[j%5];\n'
    html += '					context.stroke();\n'
    html += '                   for (var i in points){\n'
    html += '		                var p = points[i];\n'
    html += '		                context.beginPath();\n'
    html += '		                context.arc(p.x, p.y, 1, 0, 2 * Math.PI);\n'
    html += '		                context.strokeStyle = "#000";\n'
    html += '		                context.stroke();\n'
    html += '	                    if (dv[i] != \'\'){\n'
    html += '		                    context.fillStyle="black";\n'
    html += '	                    }else{\n'
    html += '		                    context.fillStyle="white";\n'
    html += '	                    }\n'
    html += '		                context.fill();\n'
    html += '		                context.beginPath();\n'
    html += '		                context.fillStyle="black";\n'
    html += '		                if (dv[i] != \'\'){\n'
    html += '			                context.fillText(dv[i], p.x - 10, p.y + 10);\n'
    html += '		                }\n'
    html += '	                }\n'
    html += '				}\n'
    html += '			},false);\n'
    html += '		})();\n'
    html += '	</script>\n'
    return html


if __name__ == '__main__':
    print("get_broken_line([], [])")
    # print(get_broken_line([], []))
